<template>
  <div class="page new-custom grey-stage"  :style="{'min-height': winHeight + 'px'}">
    <div class="container scroll-container" :style="{'height': winHeight + 'px'}">
      <div v-if="show"
        v-infinite-scroll="loadCustoms"
        :infinite-scroll-disabled="loading"
        infinite-scroll-distance="130">
          <div class="rela-tip-main">
            <div class="rela-result-tip top-list-counter">总计{{ total }}条记录</div>
          </div>
          <div class="no-data-tip" v-if="!Object.keys(list).length && init">暂无通知</div>
          <div class="new-new-custom-box">
            <template v-for="(custom, index) in list">
              <custom-item
              :key="index"
              @input="changeProperty"
              :custom_id="index"
              :value="custom"/>
            </template>
          </div>
          <div class="center-content-block load-more"
            @click="loadCustoms()"
            v-if="hasMoreData !== false && loading !== true">
            <span>点击加载</span>
          </div>
          <div class="no-data-tip" v-if="loading === true && hasMoreData === true" >
            <span>加载数据中...</span>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapActions, mapState } from 'vuex'
  import crmTabbar from '../components/crm-tabbar'
  import customItem from '../components/custom-item'

  export default {
    mounted () {
      this.initParams()
      this.caculateScroller()
      this.callJsApi('biz.navigation.setTitle', { title: '我的新增客户' })
    },
    components: {
      crmTabbar,
      customItem
    },
    methods: {
      initParams () {
        const query = this.$route.query
        this.params = {
          flag_id: query.flag_id,
          team_id: query.team_id,
          type: query.type,
          timestamp: this.getTimestamp(new Date(parseInt(query.time)))
        }
      },
      changeProperty (value, id) {
        this.list = {
          ...this.list,
          [id]: value
        }
      },
      getTimestamp(dateObject) {
        let currentYear = dateObject.getFullYear()
        let currentMonth = dateObject.getMonth()
        let currentMonthDate = new Date(currentYear, currentMonth)
        console.log('currentMonthDate.getTime()', currentMonthDate.getTime(), dateObject)
        return Math.floor(currentMonthDate.getTime() / 1000)
      },
      loadCustoms () {
        if (this.hasMoreData === false) {
            this.loading = true
            return
        }

        let promise
        if (this.loading === true) return

        // promise = this.getNewCustomList({page_index: this.page_index, page_size: this.page_size})
        promise = this.getNewCustomList(Object.assign({
          page_size: this.page_size,
          page_index: this.page_index
        }, this.params))
        this.loading = true
        this.init = false

        promise.then((response) => {
          this.init = true
          if (response.data.errcode === 0) {
            const results = response.data.results
            const list = results.list;
            if (Object.keys(results).length > 0) {
              const originLen = Object.keys(this.list).length
              // console.log('this.list', this.list, list, Object.assign(this.list, list || {}))
              this.list = Object.assign(this.list, list || {})
              this.data = results

              const currentLen = Object.keys(this.list).length
              this.hasMoreData = originLen !== currentLen
              this.page_index++
              this.total = results.total
            } else {
              this.hasMoreData = false
            }
          } else {
            this.hasMoreData = false
          }
          this.loading = false
        }).catch((e) => {
          this.init = true
          this.hasMoreData = false
          this.loading = false
          console.log(e)
        })
      },
      reset () {
        this.hasMoreData = true
        this.loading = false
        this.list = []
        this.show = false
        this.total = 0
        this.page_index = 1
        this.false = true
        this.callJsApi('biz.navigation.setTitle', { title: '我的新增客户' })

        setTimeout(() => {
          this.show = true
        })
      },
      jumpTo (cst) {

      },
      caculateScroller () {
        this.winHeight = window.innerHeight - 52
      },
      ...mapActions({
        'getNewCustomList': 'getNewCustomList',
        'getCatcstList': 'getCatcstList',
        'changeReadStatus': 'changeReadStatus',
        'getMsgCount': 'getMsgCount',
      })
    },
    activated () {
    },
    computed: {
      ...mapState({
        fullPath: state => state.route.fullPath,
        isAppMode: state => state.config.isAppMode,
        msgCount: state => state.msg.msgCount,
        windowSize: state => state.app.windowSize
      })
    },
    watch: {
      fullPath () {
        this.reset()
      },
      msgCount () {
        this.reset()
        this.list = []
        this.page_index = 1;
        setTimeout(() => {
          this.loadCustoms();
        })
      },
      windowSize (size) {
        this.caculateScroller()
      }
    },
    data () {
      return {
        catId: '',
        winHeight: '',
        page_index: 1,
        params: {
          time: '',
          flag_id: '',
          type: '',
        },
        init: false,
        page_size: 30,
        loading: false,
        show: true,
        hasMoreData: true,
        list: {},
        total: 0
      }
    }
  }
</script>
<style lang="less">
  @import "../less/base";
  .new-custom {
    overflow: hidden;

    .grey {
      color: #999999;
    }

    .new-info-det {
      float: right;
    }



    @cst-radius-size: 12px;
    @padding: 3px;

    .cst-new-ico {
      display: inline-block;
      height: @cst-radius-size;
      width: @cst-radius-size;
      border-radius: 50%;
      color: #fff;
      // border:1px solid #35adff;
      // border-color: #C8C8CD;
      background-color: red;
      position: absolute;
      top: 50%;
      text-align: center;
      line-height: @cst-radius-size;
      font-size: 12px;
      overflow: hidden;
      white-space: nowrap;
      padding: @padding;
      margin-top: -(@cst-radius-size / 2);
      margin-right: -(@cst-radius-size / 2);
      right: 50%;
      // right: 2px;
      font-weight: bolder;

      &.point {
        width: 4px;
        height: 4px;
      }
    }



    .cst-item {
      display: flex;
      background-color: white;
      border-bottom: 1px solid #f3f0f0;
      padding: 10px 5px 10px 4px;
      border-radius: 2px;
      cursor: pointer;
    }

    .cst-item:first-child {
      // border-top: 1px solid #f3f0f0;
    }

    .cst-item:last-child {
      border: none;
    }

    .new-new-custom-box {
      .custom-item-container {
        margin-bottom: 15px;
      }
    }





    .cst-left {
      display: flex;
      flex: initial;
      padding-right: 10px;
      align-items: center;
    }

    .new-custom-box {
      padding: 0 0 0 20px;
    }

    .cst-info-block {
      display: flex;
    }

    .cst-info-left {
      flex: 1;
    }

    .cst-info-right {
      flex: initial;
      position: relative;

      &.radius {
        width: 36px;
      }

      &.width-10 {
        width: 30px;
      }
    }

    .cst-right {
      flex: 1;
    }

    .cst-info-bottom {
      position: relative;
      font-size: 12px;
    }

    .read-status {
      position: absolute;
      right: 0;
      color: #f43530;
    }

    .cst-avatar {
      width: 30px;
      height: 30px;
      display: flex;
      flex: 1;
      border-radius: 50%;
      // overflow: hidden;

      img {
        width: 100%;
        // height: 100%;
      }
    }

    .load-more {
      color: #35adff;
      cursor: pointer;
    }
  }
</style>
